<template>
	<view class="container" style="height: 100vh;">
		<view class="ui-all" style="background-color: #fff;border-radius: 5px;">
			<view class="avatar" @tap="avatarChoose">
				<view class="imgAvatar">
					<view class="iavatar"
						:style="'background: url('+ sConf.pics + avater +') no-repeat center/cover #eeeeee;'"></view>
				</view>
				<text v-if="avater">修改头像</text>
				<!--
				<text v-if="!avater">授权微信</text>
				<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
				-->
			</view>
			<view class="ui-list">
				<text>昵称</text>
				<input type="text" :placeholder="value" :value="nickName" @input="bindnickName"
					placeholder-class="place" />
			</view>
			<view v-if="false" class="ui-list">
				<text>电话</text>
				<input type="tel" :placeholder="value" :value="mobile" @input="bindmobile" placeholder-class="place" />
				<!--	
				<button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
					class="getInfo bun">授权手机号</button>-->
			</view>
			<view v-if="false" class="ui-list">
				<text>电邮</text>
				<input type="text" :placeholder="value" :value="email" @input="bindemail" placeholder-class="place" />
			</view>
			<view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view>

			<view class="ui-list right">
				<text>常住地</text>
				<picker mode='region' @change="bindRegionChange">
					<view class="picker">
						{{region[0]}} {{region[1]}} {{region[2]}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>生日</text>
				<picker mode="date" :value="date" @change="bindDateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<!--
			<view class="ui-list">
				<text>姓名</text>
				<input v-if="basename" type="text" :placeholder="value" :value="basename" @input="bindbasename"
					placeholder-class="place" />
			</view>			
			<view class="ui-list">
				<text>身份证</text>
				<input v-if="idcode" type="text" :placeholder="value" :value="idcode" @input="bindidcode"
					placeholder-class="place" />
			</view>
			-->
			<view class="ui-list">
				<text>个性签名</text>
				<textarea :placeholder="value" :value="description" placeholder-class="place"
					style="background-color: #f1f1f1;padding: 5px;border-radius: 5px;"
					@input="binddescription"></textarea>
			</view>
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>

	</view>
</template>

<script>
	import utils from '@/common/utils';
	// import UniToCos from '@/js_sdk/com-ls-cos/components/ls-cos'
	import UniToCos from '../../js_sdk/com-ls-cos/components/ls-cos'
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				value: '请填写',
				sex: [{
					id: 0,
					name: '女'
				}, {
					id: 1,
					name: '男'
				}],
				url: '',
				headimg: '',
				avater: '',
				nickName: '',
				mobile: '',
				email: '',
				index: 0,
				region: ['请填写'],
				date: '请填写',
				description: '',
			}

		},
		onReady() {

		},
		props: {
			staff: {
				type: Object
			}
		},
		methods: {
			async getUploadCos(e) {
				console.log(e);
				let that = this;
				let fetchData = await uni.request({
					url: this.sConf.host + '/api/cosSt/',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'authorization': this.sConf.token
					},
					data: {}
				})
				that.uploadFile(fetchData.data.resmsg, e)
			},
			uploadFile(cosDict, file) {
				// 传入bucket和region
				let cos = new UniToCos(cosDict.account.bucket, cosDict.account.region)
				// 传入secretId,secretKey,sessionToken
				cos.createCos(cosDict.credentials.tmpSecretId, cosDict.credentials.tmpSecretKey, cosDict.credentials
					.sessionToken)
				// 传入filePath和fileName
				let filePath = file;
				let fileName = 'media/face' + filePath.substr(filePath.lastIndexOf('/'));
				cos.wxUploadFile(filePath, fileName).then(res => {
					console.log("上传图片", res.Location.substr(res.Location.indexOf('/')))
					this.avater = res.Location.substr(res.Location.indexOf('/'));
				})
			},
			/**
			 * 加载个人信息
			 */
			loadUserinfoData(e) {
				let host = this.sConf.host + '/weapps/userinfo/' + e + '/';
				let token = this.sConf.token || '';
				utils.authenticatorRead(host, token).then((res) => {
					console.log('加载个人信息', res);
					if (res.rescode === 200) {
						// this.curStaff = res.resmsg
						this.loadDefData(res.resmsg)
					}
				})
			},
			/**
			 * 初始化数据
			 */
			loadDefData(e) {
				console.log('loadDefData', e);
				this.avater = e.face
				this.nickName = e.nicename || ''
				this.mobile = e.phone || ''
				this.email = e.email || ''
				this.index = e.gender
				this.basename = e.basename || ''
				this.idcode = e.idcode
				this.description = e.desc || ''
				this.region = [e.province || '北京市', e.city || '北京市', e.area || '东城区']
				this.date = e.birthday || '0000-00-00'
			},
			/**
			 * 编辑昵称
			 * @param {Object} e
			 */
			bindnickName(e) {
				this.nickName = e.detail.value;
			},
			/**
			 * 编辑电话
			 * @param {Object} e
			 */
			bindmobile(e) {
				this.mobile = e.detail.value;
			},
			/**
			 * 编辑电邮
			 * @param {Object} e
			 */
			bindemail(e) {
				this.email = e.detail.value;
			},
			/**
			 * 选择性别
			 * @param {Object} e
			 */
			bindPickerChange(e) {
				this.index = e.detail.value;
			},
			/**
			 * 地址
			 * @param {Object} e
			 */
			bindRegionChange(e) {
				console.log(e.detail);
				this.region = e.detail.value;
			},
			/**
			 * 生日
			 * @param {Object} e
			 */
			bindDateChange(e) {
				console.log(e.detail);
				this.date = e.detail.value;
			},
			/**
			 * 签名
			 * @param {Object} e
			 */
			binddescription(e) {
				this.description = e.detail.value;
			},
			/**
			 * 选择头像
			 */
			avatarChoose() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], // 'compressed'
					sourceType: ['album', 'camera'],
					success(res) {
						console.log(res);
						that.getUploadCos(res.tempFilePaths[0])
						// that.getUploadCos(res.tempFiles[0].path)
						// tempFilePath可以作为img标签的src属性显示图片
						// that.imgUpload(res.tempFilePaths);
						// const tempFilePaths = res.tempFilePaths;
						// let filePath = res.tempFiles[0].path;
						// let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
						// console.log('选择头像', filePath);

					}
				});
			},
			getUserInfo() {
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: '已授权',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getphonenumber(e) {
				if (e.detail.iv) {
					console.log(e.detail.iv) //传后台解密换取手机号
					uni.showToast({
						title: '已授权',
						icon: 'none',
						duration: 2000
					})
				}
			},
			/**
			 * 提交数据
			 */
			savaInfo() {
				let that = this;
				let nickname = that.nickName;
				let headimg = that.headimg;
				let gender = that.index;
				// let mobile = that.mobile;
				let region = that.region;
				let birthday = that.date;
				let description = that.description;
				let email = this.sConf.auth.id + '@yuejunxi.com'; // that.email;
				let updata = {};
				if (!nickname) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				updata.nicename = nickname;
				if (!headimg) {
					headimg = that.avater;
				}
				updata.face = headimg;
				updata.gender = gender;
				// if (mobile !== null && that.isPoneAvailable(mobile)) {
				// 	updata.phone = mobile;
				// } else {
				// 	uni.showToast({
				// 		title: '手机号码有误，请重填',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return;
				// }
				if (region.length == 1) {
					uni.showToast({
						title: '请选择常住地',
						icon: 'none',
						duration: 2000
					});
					return;
				} else {
					updata.province = region[0];
					updata.city = region[1];
					updata.area = region[2];
				}
				if (birthday == "0000-00-00") {
					uni.showToast({
						title: '请选择生日',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				updata.birthday = birthday;
				if (description !== null) {
					updata.desc = description;
				}
				// if (email !== null && !utils.isValidEmail(email)) {
				// 	uni.showToast({
				// 		title: '邮箱错误',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return;
				// }
				// updata.email = email;

				that.patchUserinfo(updata);
			},
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			/**
			 * 提交数据到后台
			 * @param {Object} data
			 */
			patchUserinfo(data) {
				let host = this.sConf.host + '/weapps/editBase/' + this.sConf.auth.id + '/';
				let token = this.sConf.token
				utils.authenticatorPatch(host, token, data).then((res) => {
					console.log('修改个人基础信息', res);
					if (res.rescode === 200) {
						this.sConf.auth = res.resmsg
						uni.showToast({
							title: '成功',
							icon: 'success',
							duration: 2000
						}).then(() => {
							console.log('...............');
							uni.navigateBack()
						});
					}
				})
			},
			/**
			 * 上传头像
			 * @param {Object} file
			 */
			imgUpload(file) {
				let that = this;
				uni.uploadFile({
					header: {
						// Authorization: uni.getStorageSync('token')	
						authorization: that.sConf.token
					},
					url: that.sConf.host + '/tax/upload/', //需传后台图片上传接口
					filePath: file[0],
					name: 'url',
					formData: {
						// type: 'user_headimg'
						sid: that.sConf.auth.id,
						mode: 'face'
					},
					success: function(res) {
						console.log('upload_0', res);
						var data = JSON.parse(res.data);
						data = data.resmsg;
						console.log('upload_1', data);
						let img = data.url.split('/media')
						that.avater = '/media' + img[1];
						that.headimg = '/media' + img[1];
					},
					fail: function(error) {
						console.log('upload', error);
					}
				});
			},

		},
		onLoad() {}

	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>